<template>
    <div style="width: 100%;text-align: right;margin-bottom: 10px;">
        <ElButton type="primary" @click="addTkObj">添加</ElButton>
    </div>
    <ElTable class="list-table is-border" :="$attrs" border :data="list">
        <ElTableColumn label="退款类型">
            <template #default="{ row }">
                <ElSelect v-model="row.tklxVal" clearable>
                    <ElOption v-for="item in sklx" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="退款金额">
            <template #default="{ row }">
                <ElInput v-model="row.tkje"></ElInput>
            </template>
        </ElTableColumn>
        <ElTableColumn label="退款状态">
            <template #default="{ row }">
                <ElSelect v-model="row.tkztVal" clearable>
                    <ElOption v-for="item in tkzt" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="退款时间">
            <template #default="{ row }">
                <ElDatePicker v-model="row.tksj" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" clearable />
            </template>
        </ElTableColumn>
        <ElTableColumn label="退款渠道">
            <template #default="{ row }">
                <ElSelect v-model="row.tkqdVal" clearable>
                    <ElOption v-for="item in skqd" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="是否开票">
            <template #default="{ row }">
                <ElSelect v-model="row.sfkpVal" clearable>
                    <ElOption v-for="item in sfkp" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="开票状态">
            <template #default="{ row }">
                <ElSelect v-model="row.kpztVal" clearable>
                    <ElOption v-for="item in kpzt" :key="item.val" :label="item.name" :value="item.val" />
                </ElSelect>
            </template>
        </ElTableColumn>
        <ElTableColumn label="备注">
            <template #default="{ row }">
                <ElInput v-model="row.bz"></ElInput>
            </template>
        </ElTableColumn>
    </ElTable>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElInput, ElSelect, ElTableColumn, ElDatePicker } from 'element-plus'
import { getDictInfo } from '../api';

interface Props {
    data: any;
}

const props = withDefaults(defineProps<Props>(), {
    data: () => ({})
})

let list = computed(() => {
    return props.data.tkList;
})

let sklx = ref([]);
let tkzt = ref([]);
let skqd = ref([]);
let sfkp = ref([]);
let kpzt = ref([]);

onMounted(async () => {
    sklx.value = await getDictInfo("sklx");
    tkzt.value = await getDictInfo("tkzt");
    skqd.value = await getDictInfo("skqd");
    sfkp.value = await getDictInfo("sfkp");
    kpzt.value = await getDictInfo("kpzt");
})

const addTkObj = () => {
    console.log(list.value);
    list.value.push({
        'kpztVal': '未开票'
    });
}

</script>